<!-- 实物奖品列表 -->
<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <GzSearchForm :searchFunc="searchFunc" :resetFunc="resetFunc" searchConditionNum="6">
        <a-form-item class="table-search-item" label="活动编号">
          <a-input v-model:value="searchData['activityNo']" :placeholder="'活动编号'" />
        </a-form-item>
        <a-form-item class="table-search-item" label="批次号">
          <a-input v-model:value="searchData['batchNo']" :placeholder="'批次号'" />
        </a-form-item>
        <a-form-item class="table-search-item" label="卡券名称">
          <a-input v-model:value="searchData['couponName']" :placeholder="'卡券名称'" />
        </a-form-item>
        <a-form-item class="table-search-item" label="机构号">
          <GzTreeSelect ref="gzThreeRef" v-model:value="searchData['agentNo']" :isNeedDefault="false" />
        </a-form-item>
        <a-form-item class="table-search-item" label="卡券类型">
          <a-select v-model:value="searchData['couponType']" :placeholder="'卡券类型'">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="1">支付宝满减卡券</a-select-option>
            <a-select-option :value="2">支付宝随机减卡券</a-select-option>
            <a-select-option :value="3">微信满减卡券</a-select-option>
            <a-select-option :value="4">微信随机减卡券</a-select-option>
            <a-select-option :value="5">微信代金券</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="table-search-item" label="奖品状态">
          <a-select v-model:value="searchData['state']" :placeholder="'状态'">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="0">草稿</a-select-option>
            <a-select-option :value="1">下线</a-select-option>
            <a-select-option :value="2">上线</a-select-option>
            <a-select-option :value="3">已过期</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="table-search-item" label="活动开始时间">
          <a-date-picker
            v-model:value="searchData['sTime']"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
            valueFormat="YYYY-MM-DD HH:mm:ss"
            :placeholder="'活动开始时间'"
            style="width: 100%;"
          />
        </a-form-item>
      </GzSearchForm>

      <!-- 列表渲染 -->
      <GzTable
        ref="infoTableRef"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="searchData"
        row-key="couponId"
      >
        <template #topBtnSlot>
          <div v-if="$access('ENT_COUPON_INFO_ADD')" style="display: flex;gap: 10px;align-items: center;margin-bottom: 10px;">
            <a-select v-model:value="vdata.couponType" placeholder="选择卡券类型" allowClear style="width: 200px;">
              <a-select-option :value="1">支付宝满减卡券</a-select-option>
              <a-select-option :value="2">支付宝随机减卡券</a-select-option>
              <a-select-option :value="3">微信满减卡券</a-select-option>
              <a-select-option :value="4">微信随机减卡券</a-select-option>
              <a-select-option :value="5">微信代金券</a-select-option>
            </a-select>
            <a-tooltip placement="topLeft">
              <template v-if="!vdata.couponType" #title>
                <span>请先选择要创建的卡券类型</span>
              </template>
              <a-button :disabled="!vdata.couponType" type="primary" style="margin: 0;" @click="addOrEditFunc(false)">
                <plus-outlined />新建
              </a-button>
            </a-tooltip>
          </div>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="$access('ENT_COUPON_INFO_VIEW') && column.key === 'couponName'">
            <b><a @click="addOrEditFunc(record,true,true,true)">{{ record.couponName }}</a></b>
          </template>
          <template v-if="column.key === 'couponNum'">
            {{ record.couponType ==1||record.couponType ==2||record.couponType ==3||record.couponType ==4 ?'--': (record.couponNum || 0) + '/' + (record.couponGet || 0) }}
          </template>
          <template v-if="column.key === 'couponType'">
            <template v-if="record.couponType == 1">支付宝满减卡券</template>
            <template v-if="record.couponType == 2">支付宝随机减卡券</template>
            <template v-if="record.couponType == 3">微信满减卡券</template>
            <template v-if="record.couponType == 4">微信随机减卡券</template>
            <template v-if="record.couponType == 5">微信代金券</template>
          </template>
          <template v-if="column.key === 'couponAmount'">
            {{ record.couponAmount / 100 || '--' }}
          </template>
          <template v-if="column.key === 'couponPrice'">
            {{ record.couponType == 2 || record.couponType == 4 ? '--': record.couponPrice / 100 }}
          </template>
          <template v-if="column.key === 'state'">
            <a-badge v-if="record.state == 0" status="default" text="草稿" />
            <a-badge v-else-if="record.state == 1" status="warning" text="下线" />
            <a-badge v-else-if="record.state == 2" status="processing" text="上线" />
            <a-badge v-else-if="record.state == 3" status="error" text="过期" />
          </template>
          <template v-if="column.key === 'activityName'">
            <template v-if="record.activityName">{{ record.activityName }}</template>
            <template v-else>--</template>
          </template>
          <template v-if="column.key === 'operation'">
            <!-- 操作列插槽 -->
            <GzTableColumns>
              <a-button v-if="$access('ENT_COUPON_INFO_EDIT') && record.state == 0" type="link" @click="addOrEditFunc(record)">修改</a-button>
              <a-button v-if="$access('ENT_COUPON_INFO_EDIT') && record.state == 1" type="link" @click="stateChange(record)">上线</a-button>
              <a-button v-if="$access('ENT_COUPON_INFO_EDIT') && record.state == 2" type="link" @click="stateChange(record)">下线</a-button>
              <a-button v-if="$access('ENT_COUPON_INFO_DRAFT') && record.state != 0 " type="link" @click="modifyDraft(record)">改为草稿状态</a-button>
              <a-button v-if="$access('ENT_COUPON_INFO_EDIT') && record.state == 2 && record.couponType === 5" type="link" @click="addOrEditFunc(record,true,false,false,record.couponNum)">追加</a-button>
              <a-button v-if="$access('ENT_COUPON_INFO_DEL') && record.state !== 2 && !record.activityId" type="link" danger @click="couponDelete(record)">删除</a-button>
            </GzTableColumns>
          </template>
        </template>
      </GzTable>
    </a-card>
    <!-- 新增卡券奖品 -->
    <AddOrEdit ref="addOrEditRef" :callbackFunc="() => infoTableRef.refTable()" />
    <!-- 满减随机减 新增修改 -->
    <AddOrEditFullRandom ref="addOrEditFullRandomRef" :callBackFunc="() => infoTableRef.refTable()" />
    <!-- 详情 -->
    <Detail ref="detailRef" />
    <!-- 修改奖品状态 -->
    <a-modal
      :visible="vdata.stateVisible"
      okText="确定"
      cancelText="取消"
      style="padding: 32px 32px 24px;"
      @cancel="() => { vdata.stateVisible = false }"
      @ok="handleOkFunc"
    >
      <template #title>
        <exclamation-circle-outlined style="color: #faad14;font-size: 22px;margin-right: 20px;" />{{ vdata.title }}
      </template>
      <p style="padding-left: 30px;">请确认是否修改当前奖品状态？</p>
    </a-modal>
  </page-header-wrapper>
</template>
<script setup lang="ts">
import AddOrEdit from './AddOrEditCopy.vue'
import AddOrEditFullRandom from './AddOrEditFullRandom.vue'
import Detail from './Detail.vue'
import {$getCouponList,$couponState,$couponDraft,$couponDelete,$getCouponDetail} from '@/api/awardMange/coupon/index'
import { ref, reactive, getCurrentInstance } from 'vue'
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties    
const gzThreeRef = ref()
const infoTableRef = ref()
const addOrEditRef = ref()
const addOrEditFullRandomRef = ref()
const detailRef = ref()
const formRef = ref()

const recordType = ref()

const searchData = ref({})

const vdata: any = reactive({
    couponType: 5,   // 创建卡券类型
    stateVisible: false,
    title: '确认关闭？',
    state: 1,
    rules: {
        apiJson: [{ required: true, message: '回参不能为空', trigger: 'blur' }],
    }
})

let tableColumns = reactive([
    { key: 'batchNo', title: '批次号', dataIndex: 'batchNo', fixed: 'left', width: 140, minWidth: 140, maxWidth: 250 },
    { key: 'couponName', title: '卡券名称', dataIndex: 'couponName', width: 220, minWidth: 220, maxWidth: 250 },
    { key: 'couponNum', title: '总数量/已领取数量', dataIndex: 'couponNum', width: 170, minWidth: 170, maxWidth: 220 },
    { key: 'couponPrice', title: '卡券面额（元）', dataIndex: 'couponPrice', width: 140, minWidth: 140, maxWidth: 170 },
    { key: 'couponAmount', title: '活动预算（元）', dataIndex: 'couponAmount', width: 140, minWidth: 140, maxWidth: 170 },
    { key: 'couponType', title: '卡券类型', dataIndex: 'couponType', width: 140, minWidth: 140, maxWidth: 170 },
    { key: 'state', title: '状态', dataIndex: 'state', width: 140, minWidth: 140, maxWidth: 170 },
    { key: 'activityName', title: '已配置活动', dataIndex: 'activityName', width: 140, minWidth: 140, maxWidth: 170 },
    { key: 'agentNo', title: '机构号', dataIndex: 'agentNo', width: 140, minWidth: 140, maxWidth: 170 },
    { key: 'operation', title: '操作', dataIndex: 'operation', width: 260, fixed: 'right', align: 'center' }
])

/**
 * 重置搜索条件
 */
function resetFunc(){
    searchData.value = {}
    gzThreeRef.value.clear()
}

// 请求table接口数据
function reqTableDataFunc(params: any) {
    return $getCouponList( params)
}

/**
 * 新建修改卡券奖品
 * @param record 当前记录
 * @param disabled 是否限制修改内容 默认不限制
 * @param couponNum 允许最小卡券数量 默认1
 */
function addOrEditFunc(record,disabled = false,isDisabled,isDetail,minCouponNum = 1) {
  console.log(record.couponId,'record.couponId')
    recordType.value = record.state
    const couponType = record ? record.couponType : vdata.couponType    
    if(couponType == 1 || couponType == 2 || couponType == 3 || couponType == 4){
      console.log(isDetail,'ISdETAIL')
        return addOrEditFullRandomRef.value.show(record.couponId,disabled,isDisabled,isDetail, minCouponNum,couponType)
    }
    addOrEditRef.value.show(record.couponId, disabled,isDisabled,isDetail, minCouponNum)
}

function searchFunc() {
    infoTableRef.value.refTable(true)
}

// 修改奖品状态
function stateChange(record) {
    getCouponDetail(record.couponId)
    vdata.stateVisible = true
    vdata.state = record.state
    vdata.couponId = record.couponId
    if (record.state == 1) {
        vdata.title = '确认上线？'
    } else {
        vdata.title = '确认下线？'
    }
}
// 修改为草稿状态
function modifyDraft(record) {
  $couponDraft( { couponId: record.couponId}).then(res => {
            $infoBox.message.success('修改状态成功')  
           infoTableRef.value.refTable()
        })

}
// 提交
function handleOkFunc() {
    if (vdata.state == 1) {
      $couponState( { couponId: vdata.couponId, state: 2 }).then(res => {
            $infoBox.message.success('上线成功')
            infoTableRef.value.refTable()
            vdata.stateVisible = false
        })
    } else {
      $couponState( { couponId: vdata.couponId, state: 1 }).then(res => {
            $infoBox.message.success('下线成功')
            infoTableRef.value.refTable()
            vdata.stateVisible = false
        })
    }
}
// 获取详情数据
function getCouponDetail(couponId:any) {
  $getCouponDetail( { couponId }).then(res => {
        vdata.detailData = res
    })
}

// 删除卡券
function couponDelete(record) {
    $infoBox.confirmDanger('确认删除？', '请确认是否删除当前奖品？', () => {
        if (record.state == 2) {
            $infoBox.message.warn('该奖品已配置活动，无法删除！')
            return
        }
        $couponDelete(record.couponId).then(res => {
            $infoBox.message.success('删除成功！')
            infoTableRef.value.refTable()
        })
    })
}

function detailFunc(record) {  // 详情
    // detailRef.value.show(couponId)
    addOrEditFullRandomRef.value.show(record)

}
</script>